<template>
    <div class="sign_week_month">
        <div class="row">
            <div class="icon_icon7">
                <div v-if="!signData.week_money" class="tip_wrap">
                    <nut-popover v-model:visible="showWeekTip" :offset="[-8, 22]" :overlay="true" custom-class="popover-common" overlay-class="popover-overlay-transparent" location="top-start" theme="dark">
                        <template #reference>
                            <div class="icon_q"></div>
                        </template>
                        <template #content>
                            <div class="tip_content">{{ t('activity_page_sign7day', { money: $currencyMoney(maxLevelData.week) }) }}</div>
                        </template>
                    </nut-popover>
                </div>
            </div>
            <div class="col">
                {{ t('activity_page_sign7Day') }}
                <div v-if="signData.week_money === -1" class="icon_checked"></div>
                <div v-else class="btn_get" :class="[{ disabled: !signData.week_money }]" @click="getAwardHandle(1)">{{ t('activity_page_sign_btnGet') }}</div>
            </div>
        </div>
        <div class="row">
            <div class="icon_icon30">
                <div v-if="!signData.month_money" class="tip_wrap">
                    <nut-popover v-model:visible="showMonthTip" :offset="[24, 22]" :overlay="true" custom-class="popover-common" overlay-class="popover-overlay-transparent" location="top-end" theme="dark">
                        <template #reference>
                            <div class="icon_q"></div>
                        </template>
                        <template #content>
                            <div class="tip_content">{{ t('activity_page_signMonthFull', { money: $currencyMoney(maxLevelData.month) }) }}</div>
                        </template>
                    </nut-popover>
                </div>
            </div>
            <div class="col">
                {{ t('activity_page_sign1Month') }}
                <div v-if="signData.month_money === -1" class="icon_checked"></div>
                <div v-else class="btn_get" :class="[{ disabled: !signData.month_money }]" @click="getAwardHandle(2)">{{ t('activity_page_sign_btnGet') }}</div>      
            </div>
        </div>
    </div>     
</template>
<script lang="ts" setup>
import { defineEmits, ref } from 'vue'
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const emit = defineEmits(["getAward"]);
const props =defineProps({
    signData: {
        type: Object,
        default: {}
    },
    maxLevelData: {
        type: Object,
        default: {}
    }
})

const showWeekTip = ref(false)
const showMonthTip = ref(false)

const getAwardHandle = (type: number) => {
    if ((type === 2 && !props.signData.month_money) || (type === 1 && !props.signData.week_money)) {
        return false
    }
    emit("getAward", type);
}

</script>
<style lang="scss" scoped>
.tip_content {
    width: 200px;
}
.sign_week_month {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    .row {
        flex: 1;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        background: radial-gradient(54.96% 100% at 50% 0%, #7A39FB 0%, rgba(30, 30, 56, 0.96) 100%);
        border-radius: 8px;
        height: 72px;
        padding-left: 10px;
        .btn_get {
            width: 50px;
            height: 20px;
            border-radius: 4px;
            background: linear-gradient(180deg, #5567ff 0%, #9e1eff 100%);
            color: #ffffff;
            text-align: center;
            line-height: 20px;
            margin-top: 8px;
            padding: 0 6px;
            box-shadow: 0.5px 0.5px 1px 0px #9B9EFF inset;
            &.disabled {
                background: rgba(81, 81, 81, 1);
                color: #ffffff;
                box-shadow: 0.5px 0.5px 1px 0px rgba(81, 81, 81, 1) inset;
            }
        }
        .icon_q {
            width: 16px;
            height: 16px;
            background: url("/imgs/activity/signIn/icon_q.png") no-repeat;
            background-size: 100% 100%;
        }
        .icon_icon7 {
            width: 58px;
            height: 50px;
            background: url("/imgs/activity/signIn/icon_coin7.png") no-repeat;
            background-size: 100% 100%;
            position: relative;
            .tip_wrap {
                position: absolute;
                top: -4px;
                right: -10px;
            }
        }
        .icon_icon30 {
            width: 60px;
            height: 60px;
            background: url("/imgs/activity/signIn/icon_coin30.png") no-repeat;
            background-size: 100% 100%;
            position: relative;
            .tip_wrap {
                position: absolute;
                top: 0px;
                right: -13px;
            }
        }
        .col {
            margin-left: 10px;
            font-size: 12px;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            height: 100%;
            padding-top: 12px;
            flex-direction: column;
            flex: 1;
            text-align: center;
            line-height: 14px;
            .icon_checked {
                width: 20px;
                height: 20px;
                background: url("/imgs/activity/signIn/icon_checked.png") no-repeat;
                background-size: 100% 100%;
                margin-top: 10px;
            }
        }   
    }
}
</style>